
* { margin:0; padding:0; }
html { background:#000000; background-image: url("image/logo.png"); background-size: 20%;background-repeat: no-repeat; background-position: left 10px top 10px;}
body { background:#efefef; overflow:hidden; }

h1 { 
    text-align:center; margin-top:40px; text-shadow:1px 1px 3px #000; font-size:40px; color:#fff;

}

#shadow {
    height:300px; width:600px; position:absolute; top:400px; left:0; z-index:0;
    background:-webkit-radial-gradient(center center , 150px 50px, #050505, #050505 );
    background:-moz-radial-gradient(center center , 150px 50px, #050505, #050505 );
    background:-ms-radial-gradient(center center , 150px 50px, #050505, #050505 );
    background:-o-radial-gradient(center center , 150px 50px, #050505, #050505 );
    background:radial-gradient(center center , 150px 50px, #050505, #050505 );
    -moz-transform:perspective(100px) rotateX(60deg) rotateY(0deg);
    -ms-transform:perspective(100px) rotateX(60deg) rotateY(0deg);
    -o-transform:perspective(100px) rotateX(60deg) rotateY(0deg);
    transform:perspective(100px) rotateX(60deg) rotateY(0deg);
    opacity:0;
}

#container {
    /*background:black;*/
    height:240px; width:240px; position:absolute; top:180px; z-index:1;
    -webkit-transform-style:preserve-3d;
    -moz-transform-style:preserve-3d;
    -ms-transform-style:preserve-3d;
    -o-transform-style:preserve-3d;
    transform-style:preserve-3d;
    -webkit-transform:perspective(2000px) rotateX(-10deg) rotateY(45deg) ;
    -moz-transform:perspective(2000px) rotateX(-10deg) rotateY(45deg) ;
    -ms-transform:perspective(2000px) rotateX(-10deg) rotateY(45deg) ;
    -o-transform:perspective(2000px) rotateX(-10deg) rotateY(45deg) ;
    transform:perspective(2000px) rotateX(-10deg) rotateY(45deg) ;
}
#container p {
    position:absolute;
    top:40%;
    left:35%;
    padding:5px;
    word-spacing:0.2em;
    line-height:20px;
    background:black;
    color:#fff;
    text-align:center;
}
#container div { 
     height:240px; width:240px; position:absolute; left:0; top:0; color:#FFA500; line-height:240px; text-align:center; font-weight:bold; font-size:80px; cursor:pointer;
     background:rgba( 239,239,239, 1 );
     -webkit-transition:500ms all ease;
     -moz-transition:500ms all ease;
     -ms-transition:500ms all ease;
     -o-transition:500ms all ease;
     transition:500ms all ease;
}
#container div div {
    border:1px solid #050505; /* rgba( 255,255,255, 1 ) */
    box-shadow:1px 0 3px #fff,1px 0px 10px #efefef;
    border-radius:8px;
    background:-webkit-radial-gradient(center, #050505, #050505 );
    background:-moz-radial-gradient(center, #050505, #050505 );
    background:-ms-radial-gradient(center, #050505, #050505 );
    background:-o-radial-gradient(center, #050505, #050505 );
    background:radial-gradient(center, #050505, #050505 );
}
#container div div:hover {
    background:-webkit-radial-gradient(center, #050505, #050505 );
    background:-moz-radial-gradient(center, #050505, #050505 );
    background:-ms-radial-gradient(center, #050505, #050505 );
    background:-o-radial-gradient(center, #050505, #050505 );
    background:radial-gradient(center, #050505, #050505 );
}
#container div ul {
    list-style:none;
    margin:30px;
}
#container div li {
    width: 60px;
    height:60px;
    float:left;
    overflow:hidden;
    -webkit-transition:500ms all ease;
    -moz-transition:500ms all ease;
    -ms-transition:500ms all ease;
    -o-transition:500ms all ease;
    transition:500ms all ease;
}

#container div li span  {
    width:50px; height:50px; margin:5px auto;
    display:block;
    background:-webkit-linear-gradient(top, #eee, #fff );
    background:-moz-linear-gradient(top, #eee, #fff );
    background:-ms-linear-gradient(top, #eee, #fff );
    background:-o-linear-gradient(top, #eee, #fff );
    background:linear-gradient(top, #eee, #fff );
    border-radius:25px;
    box-shadow:-1px -1px 2px #000;
}